<template>
	<div v-loading="loading">
		<div class="vs-search-box">
			<template v-if="type == 1">
				<el-form :model="form" style="width: 1000px" label-width="100px">
					<el-form-item label="退货单状态">
						<span class="tab-red-text status">{{ detail.status | statusFilter }}</span>
						<el-button class="fl-right" v-if="detail.status == 2" @click="dialogVisible = true" type="primary">填写物流信息</el-button>
					</el-form-item>
					<template v-if="detail.logistics">
						<h3>物流信息</h3>
						<el-form-item label="物流公司">
							<span>{{ detail.logistics_company }}</span>
						</el-form-item>
						<el-form-item label="物流单号">
							<span>{{ detail.logistics_number }}</span>
						</el-form-item>
					</template>
					<template v-if="detail.admin">
						<h3>操作信息</h3>
						<el-form-item label="审核人员">
							<span>{{ detail.admin.name }}</span>
						</el-form-item>
						<el-form-item label="备注">
							<span>{{ detail.admin_remarks }}</span>
						</el-form-item>
						<el-form-item label="审核时间">
							<span>{{ $moment(detail.admin_time * 1000).format('YYYY-MM-DD hh:mm:ss') }}</span>
						</el-form-item>
					</template>
				</el-form>
				<el-descriptions title="" border :column="2" style="width: 1000px">
					<el-descriptions-item label="退货单号">{{ detail.number }}</el-descriptions-item>
					<el-descriptions-item label="退货门店">{{ userInfo.store.title }}</el-descriptions-item>
					<el-descriptions-item label="申请日期" span="2">{{ detail.create_time }}</el-descriptions-item>
					<el-descriptions-item label="订单备注">
						{{ detail.describe }}
					</el-descriptions-item>
				</el-descriptions>
			</template>
			<el-form v-else ref="form" :model="form" :rules="rules" style="width: 1000px" inline label-width="100px">
				<el-form-item label="退货单号">
					<el-input disabled style="width: 200px" placeholder="系统自动生成"></el-input>
				</el-form-item>
				<el-form-item label="退货门店">
					<el-input disabled style="width: 200px" :placeholder="userInfo.store.title"></el-input>
				</el-form-item>
				<el-form-item label="退货类型" prop="goods_type">
					<el-select v-model="form.goods_type" placeholder="请选择" @change="typeChange" style="width: 200px">
						<!-- <el-option label="特殊商品" value="1"></el-option> -->
						<el-option label="普通商品" value="2"></el-option>
						<el-option label="洗护用品" value="3"></el-option>
						<el-option label="其他" value="4"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="退货单号" prop="take_ticket_id">
					<el-select v-model="form.take_ticket_id" filterable clearable placeholder="请选择" @change="takeChange" style="width: 200px">
						<el-option v-for="(item, index) in list" :key="index" :label="item.number" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="订单备注" class="vs-form-item-100">
					<el-input v-model="form.describe" :rows="4" type="textarea" placeholder="请输入"></el-input>
				</el-form-item>
			</el-form>
		</div>
		<div class="vs-table-box">
			<el-table :data="tableData" header-row-class-name="has-gutter-table" style="width: 100%; margin-top: 20px" border ref="multipleTable" key="1">
				<el-table-column prop="id" width="100px" label="序号" align="center"></el-table-column>
				<template v-if="form.goods_type != 1">
					<el-table-column prop="goods_number" label="商品编码" align="center"> </el-table-column>
					<el-table-column prop="goods_name" label="商品系列" align="center"> </el-table-column>
				</template>
				<template v-if="form.goods_type == 1 || form.goods_type == 2">
					<el-table-column prop="blank_type_name" label="毛坯种类" align="center"> </el-table-column>
					<el-table-column prop="needle_type_name" label="递针类型" align="center"> </el-table-column>
					<el-table-column prop="size_name" label="尺寸" align="center"> </el-table-column>
					<el-table-column prop="sex_name" label="性别" align="center"> </el-table-column>
					<el-table-column prop="length_name" label="长度" align="center"> </el-table-column>
					<el-table-column prop="colour_name" label="颜色" align="center"> </el-table-column>
				</template>
				<template v-if="form.goods_type == 1">
					<!-- <el-table-column prop="style_name" label="款式" align="center"> </el-table-column> -->
					<el-table-column prop="hairstyle_name" label="发型" align="center"> </el-table-column>
					<el-table-column prop="series_name" label="系列" align="center"> </el-table-column>
				</template>
				<template v-if="form.goods_type == 3 || form.goods_type == 4">
					<el-table-column prop="spce" label="规格" min-width="80" align="center"></el-table-column>
					<el-table-column prop="unit" label="单位" min-width="80" align="center"></el-table-column>
				</template>
				<template v-if="form.goods_type != 1">
					<el-table-column prop="quantity" label="要货数量" align="center"> </el-table-column>
					<el-table-column v-if="utils.getIsShopowner()" prop="price" label="要货金额" align="center"> </el-table-column>
					<el-table-column prop="store_stock_quantity" label="可退数量" min-width="100" align="center"></el-table-column>
					<el-table-column prop="" label="退货数量" width="150" align="center" key="100">
						<template slot-scope="scope">
							<div v-if="type == 1">{{ scope.row.after_sale_quantity }}</div>
							<el-input v-if="type == 2" type="number" @blur="quantityBlur($event, scope.$index)" oninput="value=value.replace(/[^\d]/g,'')" v-model.number="scope.row.quantity_new" clearable placeholder="请输入"></el-input>
						</template>
					</el-table-column>
					<el-table-column v-if="utils.getIsShopowner()" prop="price_new" label="退货金额" width="150" align="center" key="101">
						<template slot-scope="scope">
							<div v-if="type == 1">{{ scope.row.after_sale_price }}</div>
							<el-input v-if="type == 2" type="number" @blur="priceBlur($event, scope.$index)" oninput="value=value.replace(/[^\d]/g,'')" v-model.number="scope.row.price_new" clearable placeholder="请输入"></el-input>
						</template>
					</el-table-column>
				</template>
			</el-table>

			<div class="vs-bottom-btns" v-if="type == 2" style="margin: 50px 0; justify-content: center !important">
				<el-button @click="utils.backPage()">返回</el-button>
				<el-button @click="commit" type="primary">提交</el-button>
			</div>

			<el-dialog title="填写物流信息" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false" :before-close="handleClose">
				<el-form :model="form1" ref="form1" :rules="rules1" label-width="100px">
					<el-form-item label="物流公司" prop="logistics_company">
						<el-input v-model="form1.logistics_company" placeholder="请输入物流公司"></el-input>
					</el-form-item>
					<el-form-item label="物流单号" prop="logistics_number">
						<el-input v-model="form1.logistics_number" placeholder="请输入物流单号"></el-input>
					</el-form-item>
					<el-form-item label="备注">
						<el-input v-model="form1.remarks" placeholder="请输入"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button v-loading="isBtn" type="primary" @click="comfrim">确 定</el-button>
				</span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		computed: {
			...mapState('user', ['userInfo']),
		},
		data() {
			return {
				isBtn: false,
				loading: false,
				type: 1, //1详情  2新增
				list: [],
				detail: '',
				form: {
					take_ticket_id: '',
					store_id: '',
					describe: '',
					goods_type: '2',
				},
				rules: {
					goods_type: { required: true, message: '请选择退货类型', trigger: 'change' },
					take_ticket_id: { required: true, message: '请选择单号', trigger: 'change' },
				},
				dialogVisible: false,
				tableData: [],
				form1: {
					logistics_company: '',
					logistics_number: '',
					remarks: '',
				},
				rules1: {
					logistics_company: { required: true, message: '请输入物流公司', trigger: 'blur' },
					logistics_number: { required: true, message: '请输入物流单号', trigger: 'blur' },
				},
			};
		},
		filters: {
			statusFilter(status) {
				let arr = ['', '待审核', '已审核', '已驳回', '待收货', '待发货', '已发货', '已完成'];
				return arr[status];
			},
		},
		created() {
			let { type = 1, id } = this.$route.query;
			this.type = type;
			this.utils.typeTitle(type, '退货单');
			this.typeChange();
			if (id) {
				this.getDetail(id);
			}
			// if(type==2){
			//     this.$route.meta.title = '新增退货单'
			// }else this.$route.meta.title = '退货单详情'
		},
		methods: {
			comfrim() {
				this.$refs['form1'].validate(async (valid) => {
					if (!valid) return;
					this.isBtn = true;
					let { code } = await this.$Http.returnGoodsLogistics({
						id: this.$route.query.id,
						...this.form1,
					});
					this.isBtn = true;
					if (code) {
						this.$message.success('操作成功!');
						this.dialogVisible = false;
						this.getDetail(this.$route.query.id);
					}
				});
			},
			async getDetail(id) {
				this.loading = true;
				let { code, data } = await this.$Http.returnGoodsInfo({ id });
				this.loading = false;
				if (code) {
					console.log(data);
					this.tableData = data.list;
					this.form.goods_type = data.row.goods_type;
					this.detail = data.row;
				}
			},
			priceBlur(e, i) {
				this.tableData[i].price_new = Math.abs(this.tableData[i].price_new).toFixed(2);
			},
			quantityBlur(e, i) {
				this.tableData[i].quantity_new = parseInt(Math.abs(this.tableData[i].quantity_new));
				if (this.tableData[i].quantity_new > this.tableData[i].store_stock_quantity) {
					this.tableData[i].quantity_new = this.tableData[i].store_stock_quantity;
				}
			},
			// id 切换
			async takeChange() {
				this.tableData = [];
				if (!this.form.take_ticket_id) {
					return;
				}
				let arr = ['specialLists', 'ordinary', 'other', 'other'];
				this.loading = true;
				let parms = {
					id: this.form.take_ticket_id,
				};
				if (this.form.goods_type > 2) {
					parms.take_ticket_type = this.form.goods_type;
				}
				let { code, data } = await this.$Http[arr[this.form.goods_type - 1]](parms);
				this.loading = false;
				if (code) {
					console.log(data);
					this.detail = data;
					if (this.form.goods_type == 1) {
						// 定制
						this.tableData = [data.special];
					} else {
						let info = data.info;
						for (let i in info) {
							this.$set(info, 'price_new', '');
							this.$set(info, 'quantity_new', '');
						}
						this.tableData = info;
					}
				}
			},
			// 类型切换
			async typeChange() {
				this.form.take_ticket_id = '';
				this.tableData = [];

				let arr = ['specialLists', 'ordinary', 'other', 'other'];
				let parms = {
					limit: 99999,
					// 已入库的订单才可以退货
					status: 3,
				};
				if (this.form.goods_type > 2) {
					parms.take_ticket_type = this.form.goods_type;
				}
				this.loading = true;
				let { code, data } = await this.$Http[arr[this.form.goods_type - 1]](parms);
				this.loading = false;
				if (code) {
					this.list = data.data;
				}
			},
			// 提交
			commit() {
				this.$refs['form'].validate(async (valid) => {
					if (!valid) return;
					let parms = {
						take_ticket_id: this.form.take_ticket_id,
						store_id: this.userInfo.store_id,
						describe: this.form.describe,
						goods_type: this.form.goods_type,
					};
					if (this.form.goods_type == 1) {
						this.$confirm('是否确定退货该要货单', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning',
						})
							.then(async () => {
								let info = [
									{
										after_sale_price: this.detail.price,
										after_sale_quantity: this.detail.quantity,
										goods_id: this.detail.special.goods_id,
									},
								];
								parms.info = JSON.stringify(info);
								let { code } = await this.$Http.returnGoodsAdd(parms);
								if (code) {
									this.$message.success('提交成功');
									this.utils.backPage();
								}
							})
							.catch(() => {});
					} else {
						let flag = false;
						let info = [];
						for (let i in this.tableData) {
							if (this.tableData[i].price_new && this.tableData[i].quantity_new) {
								flag = true;
								info.push({
									after_sale_price: this.tableData[i].price_new,
									after_sale_quantity: this.tableData[i].quantity_new,
									goods_id: this.tableData[i].goods_id,
								});
							}
						}
						if (!flag) {
							return this.$message.warning('请输入退货数量和退货金额');
						}
						parms.info = JSON.stringify(info);
						let { code } = await this.$Http.returnGoodsAdd(parms);
						if (code) {
							this.$message.success('提交成功');
							this.utils.backPage();
						}
					}
				});
			},

			handleClose(dom) {
				dom && dom();
			},
		},
	};
</script>

<style leng="scss" scoped>
	.status {
		font-size: 18px;
		cursor: default;
	}
</style>
